import React, { Component } from 'react';

import Header from "./component/Header/index.jsx";
import List from "./component/List/index.jsx";
import Footer from "./component/Footer/index.jsx";

import "./App.css";

export default class App extends Component {
    state={
        todos:[
            {
                id:"001",name:"吃饭",done:true
            },
            {
                id:"002",name:"睡觉",done:false
            },
            {
                id:"003",name:"草碧",done:true
            }
        ]
    };
    // 添加一个todo
    addTodo=(todoObj)=>{
        const {todos} =this.state;
        const newObj=[todoObj,...todos];
        this.setState({todos:newObj});
    };
    // 改变一个todo的选中状态
    changeTodo=(id,done)=>{
        const {todos}=this.state;
        todos.forEach((item)=>{
            if(item.id === id){
                item.done=done;
            };
        });
        this.setState({
            todos
        });
    };
    // 删除一个todo
    deleteTodo=(id)=>{
        const newTodos=this.state.todos.filter((item)=>{
            return item.id !==id;
        });
        this.setState({
            todos:newTodos
        });
    };
    // 全选复选事件监听
    checkAllTodo=(done)=>{
        const {todos} =this.state;
        const newTodos=todos.map((item)=>{
            return {
                ...item,
                done
            };
        });
        this.setState({
            todos:newTodos
        });
    };
    // 清除所有完成的todo
    clearAllDoneTodo=()=>{
        const {todos}=this.state;
        const newTodos=todos.filter((item)=>{
            return !item.done;
        });
        this.setState({
            todos:newTodos
        });
    };

    render() {
        const {todos} =this.state;
        return (
            <div className="todo-container">
                <div className="todo-wrap">
                    <Header addTodo={this.addTodo}></Header>
                    <List todos={todos} changeTodo={this.changeTodo} deleteTodo={this.deleteTodo}></List>
                    <Footer todos={todos} checkAllTodo={this.checkAllTodo} 
                        clearAllDoneTodo={this.clearAllDoneTodo}
                    ></Footer>
                </div>
            </div>
        );
    };
};
